<template>
	<view style="background: #fbfbfb">
		<view class="user-info">
			<image class="u-img" @error="onHeaderError()" :src="userInfo.img"></image>
			<view class="u-text">
				<view class="username">{{ userInfo.userName }}</view>
				<view class="small-text">欢迎使用,{{ getTimeText() }}</view>
			</view>
			<view class="u-icon-setting" @click="toUserInfo">
				<u-icon name="arrow-right" color="rgb(227 227 227)" size="18"></u-icon>
			</view>
		</view>
		<view class="u-menu-list">
			<view class="u-menu-item" @click="itemClick(item)" v-for="(item, index) in menu" :key="index">
				<view class="u-menu-icon">
					<image style="width: 36rpx; height: 36rpx" :src="item.icon"></image>
					<!-- 	<u-icon :name="item.icon" color="#303133" size="15"></u-icon> -->
				</view>
				<view class="u-menu-text">{{ item.name }}</view>
				<view class="u-menu-icon-rigth">
					<u-icon name="arrow-right" color="rgb(231 231 231)" size="15"></u-icon>
				</view>
			</view>
		</view>
		<!-- <vol-tabbar :index="2"></vol-tabbar> -->
		<!-- 版本信息 -->
		<u-modal
			:show="versionsShow"
			:title="versionsTitle"
			:content="versionsContent"
			:closeOnClickOverlay="closeOnClickOverlay"
			@confirm="confirmFn"
			@close="versionsShow = false"
		></u-modal>
	</view>
</template>

<script>
import pushUser from '@/util/pushUser.js';
export default {
	data() {
		return {
			versions: '',
			versionsTitle: '',
			versionsContent: '',
			versionsShow: false,
			closeOnClickOverlay: false,
			showConfirmButton: false,
			height: 50,
			userInfo: {
				img: '/static/imgs/head.png',
				userName: '请登陆'
			},
			menu: [
				{
					name: '修改密码',
					icon: '/static/pwd.png',
					color: '',
					path: '/pages/user/modifyPwd/modifyPwd'
				},
				// {
				// 	name: "系统设置",
				// 	path: '',
				// 	icon: 'setting',
				// 	color: ''
				// },
				{
					name: '版本信息',
					path: '',
					icon: '/static/versions.png',
					color: ''
				},
				{
					name: '退出登陆',
					path: '/pages/login/login',
					icon: '/static/logout.png',
					color: ''
				}
			],
			Ip:'',
		};
	},
	onLoad() {
		var _this = this;
		// 获取手机状态栏高度
		uni.getSystemInfo({
			success: function (data) {
				// 将其赋值给this
				_this.height = data.statusBarHeight;
			}
		});
		this.Ip = this.$store.state.IP; // 获取当前域名
		this.getLoginInofo();
	},
	onShow() {
		console.log(123);
		uni.getLocation({
			type: 'wgs84',
			geocode: true, //设置该参数为true可直接获取经纬度及城市信息
			success: (res) => {
				console.log('getGPS---', res);
				this.Location.longitude = res.longitude;
				this.Location.latitude = res.latitude;
				console.log('this.Location', this.Location);
				// if (this.off) {
				// 	this.gridSave();
				// }
				uni.showToast({
					title: '获取位置信息成功',
					icon: 'success'
				});
			},
			fail: (ress) => {
				//失败调用
				console.log('失败啦--fail');
				uni.showToast({
					title: '无法获取位置信息',
					icon: 'none'
				});
			}
		});

		// uni.chooseLocation({
		// 	success: (res) => {
		// 		console.log(res);
		// 		console.log('位置名称：' + res.name);
		// 		console.log('详细地址：' + res.address);
		// 		console.log('纬度：' + res.latitude);
		// 		console.log('经度：' + res.longitude);
		// 	}
		// });
		this.getUserInfo();
		this.getLoginInofo();
		pushUser();
	},
	methods: {
		toJSON() {},
		confirmFn() {
			if (this.versionsTitle != '当前版本') {
				this.versionsShow = false;
				this.$store.commit('clearUserInfo');
				// #ifdef APP-PLUS
				    plus.runtime.openURL(this.Ip+"api/AppUpdate/appup");
				// #endif
				// uni.reLaunch({
				// 	url: '/pages/login/login'
				// });
			} else {
				this.versionsShow = false;
			}
		},
		getLoginInofo() {
			const userName = uni.getStorageSync('userName');
			const appVersion = uni.getSystemInfoSync().appVersion;
			const url = 'api/Appversion/version?version=' + appVersion + '&UserName=' + userName;
			console.log("appVersion",appVersion)
			try {
				this.http.post(url).then((x) => {
					// this.popupShow = !x;
					this.versionsShow = !x;
					this.versionsTitle = '提示';
					this.versionsContent = '当前版本或该用户账号不可用，请去下载新版本。';
					this.closeOnClickOverlay = false;
					this.showConfirmButton = true;
					if (x) {
						uni.showTabBar();
					} else {
						uni.hideTabBar();
					}
				});
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		getUserInfo() {
			this.http.post('api/user/getCurrentUserInfo', {}).then((x) => {
				//x.data.gender = x.data.gender;
				//  this.$refs.form.reset(x.data);
				this.userInfo.img = this.http.ipAddress + x.data.headImageUrl;
				//this.userInfo.createDate = x.data.createDate;
				this.userInfo.userName = x.data.userTrueName;
				//this.userInfo.phoneNo = x.data.phoneNo;
				//this.userInfo.email = x.data.email;
			});
		},
		getTimeText() {
			let timeNow = new Date();
			// 获取当前小时
			let hours = timeNow.getHours();
			// 设置默认文字
			let text = ``;
			// 判断当前时间段
			if (hours >= 0 && hours <= 10) {
				text = `早上好`;
			} else if (hours > 10 && hours <= 14) {
				text = `中午好`;
			} else if (hours > 14 && hours <= 18) {
				text = `下午好`;
			} else if (hours > 18 && hours <= 24) {
				text = `晚上好`;
			}
			return text;
		},
		onHeaderError() {
			this.userInfo.img = '/static/imgs/head.png';
		},
		test() {
			this.http.get('api/menu/getTreeMenu', {}, false).then((result) => {
				console.log(result);
			});
		},
		toUserInfo() {
			uni.navigateTo({
				url: '/pages/user/modifyPwd/modifyPwd'
			});
		},
		itemClick(item) {
			if (item.name == '版本信息') {
				this.versionsShow = true;
				(this.versionsTitle = '当前版本'), (this.versionsContent = uni.getSystemInfoSync().appVersion);
				this.closeOnClickOverlay = true;
				this.showConfirmButton = true;
			}
			if (!item.path) {
				return;
			}
			if (item.path == '/pages/login/login') {
				this.$store.commit('clearUserInfo');
				uni.reLaunch({
					url: item.path
				});
				return;
			}
			uni.navigateTo({
				url: item.path
			});
		}
	}
};
</script>

<style lang="less" scoped>
.versions {
	width: 80vw;
	height: 60rpx;
}
.user-info {
	// height: 220rpx;
	display: flex;
	align-items: center;
	padding: 150rpx 40rpx 60rpx 60rpx;
	background-image: linear-gradient(135deg, #26bcff 10%, #078ef9);
	position: relative;

	.u-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
	}

	.u-text {
		flex: 1;
		color: #ffffff;
		padding: 26rpx 30rpx;
	}

	.username {
		font-weight: bolder;
		font-family: 黑体;
	}

	.small-text {
		font-size: 24rpx;
		padding-top: 10rpx;
	}

	.u-icon-setting {
		width: 30rpx;
		color: #ffffff;
	}
}

.u-menu-list {
	background: #ffffff;
	margin: 20rpx;
	border-radius: 5rpx;
	border: 1px solid #f7f7f7;

	.u-menu-item {
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f7f7f7;
		align-items: center;

		.u-menu-icon {
			padding-top: 8rpx;
			padding-right: 20rpx;
		}

		.u-menu-text {
			flex: 1;
			color: #5e5e5e;
		}

		.u-menu-icon-rigth {
			width: 30rpx;
		}
	}
}
</style>
